<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 过滤器
             作用：字符加工
             特点：只能用于v-bind 与{{}}  ,它内部的方法不能使用this  
             定义
                filters:{
                    方法名(str){
                        return 加工后的值
                    }
                }
              调用：
                  {{ str的实参值 | 方法名 | 过滤器2 }}
             补充：过滤器有多个参数   {{ 实参1 | 方法名(实参2) }}
                   多个过滤器     {{ 实参1 | 过滤器 |过滤器2 }}
    -->
    <div id="app">
      <h1>{{time | formatTime('时间')}}</h1>
      <h2>{{num}}</h2>
      <button @click="num++">修改num</button>
    </div>
    <script src="./vue.js"></script>
    <!-- 
        moment(时间格式数据).format('YYYY-MM-DD HH(hh):mm:ss')
     -->
    <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          time: new Date(),
          num: 1
        },
        filters: {
          formatTime (str, str2) {
            console.log(str)
            return str2 + ':' + moment(str).format('YYYY-MM-DD')
          }
        }
      })
    </script>
  </body>
</html>
